{% extends "base.html" %}
{% block title %}node页面{% endblock %}
{% block k8s %}layui-nav-itemed{% endblock %}
{% block k8s_node %}layui-this{% endblock %}
{% block body %}
    <span class="layui-breadcrumb span-float" lay-separator="/">
      <a href="/">首页</a>
      <a href='{% url "k8s:node" %}'>Kubernetes</a>
      <a href='{% url "k8s:node" %}'>node</a>
      <a><cite>节点信息</cite></a>
   </span>
    <div class="layui-col-md12 layui-col-space10">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">节点资源</div>
                <div class="layui-card-body">
                    CPU:
                    <span class="layui-badge layui-bg-orange">已分配 {{ node_resources.cpu_requests }}核</span>
                    <span class="layui-badge layui-bg-gray">/</span>
                    <span class="layui-badge layui-bg-orange">可分配 {{ node_resources.allocatable_cpu }}核</span>
                    <span class="layui-badge layui-bg-gray">/</span>
                    <span class="layui-badge layui-bg-orange">总量 {{ node_resources.capacity_cpu }}核</span>
                    <hr class="layui-bg-gray">
                    内存：
                    <span class="layui-badge layui-bg-orange"> 已分配 {{ node_resources.memory_requests }} G</span>
                    <span class="layui-badge layui-bg-gray">/</span>
                    <span class="layui-badge layui-bg-green">可分配 {{ node_resources.allocatable_memory }} G</span>
                    <span class="layui-badge layui-bg-gray">/</span>
                    <span class="layui-badge layui-bg-blue">总量 {{ node_resources.capacity_memory }} G</span>
                    <hr>
                    短暂存储：
                    <span class="layui-badge layui-bg-green">可分配 {{ node_resources.allocatable_ephemeral_storage }} G</span>
                    <span class="layui-badge layui-bg-gray">/</span>
                    <span class="layui-badge layui-bg-blue">总量 {{ node_resources.capacity_ephemeral_storage }} G</span>
                    <hr class="layui-bg-gray">
                    Pod数量：
                    <span class="layui-badge layui-bg-green">已创建 {{ node_resources.pods_number }} 个</span>
                    <span class="layui-badge layui-bg-gray">/</span>
                    <span class="layui-badge layui-bg-blue">总量 {{ node_resources.capacity_pods }} 个</span>
                    <hr class="layui-bg-gray">
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">节点信息</div>
                <div class="layui-card-body">
                    节点名称：{{ node_info.node_name }}
                     <hr class="layui-bg-gray">
                     主机名：{{ node_info.hostname }}
                     <hr class="layui-bg-gray">
                     内部IP：{{ node_info.internal_ip }}
                     <hr class="layui-bg-gray">
                     Pod网络：{{ node_info.pod_cidr }}
                     <hr class="layui-bg-gray">
                     操作系统：{{ node_info.os }}
                     <hr class="layui-bg-gray">
                     内核：{{ node_info.kernel }}
                     <hr class="layui-bg-gray">
                     CPU架构：{{ node_info.cpu_arch }}
                     <hr class="layui-bg-gray">
                     容器引擎：{{ node_info.container_runtime_version }}
                     <hr class="layui-bg-gray">
                     kubelet版本：{{ node_info.kubelet_version }}
                     <hr class="layui-bg-gray">
                     kube-proxy版本：{{ node_info.kube_proxy_version }}
                     <hr class="layui-bg-gray">
                     不可调度：{{ node_info.unschedulable }}
                     <hr class="layui-bg-gray">
                     标签：
                     {% for k,v in node_info.labels.items %}
                     <span style='border: 1px solid #d6e5ec;border-radius: 20px;padding: 1px 6px 1px 6px'>{{ k }}:{{ v }}</span>
                     {% endfor %}
                     <hr class="layui-bg-gray">
                     污点：
                     {% if node_info.taints %}
                         {% for i in node_info.taints%}
                            <span style='border: 1px solid #d6e5ec;border-radius: 20px;padding: 1px 6px 1px 6px'>{{ i.key }}={{ i.value }}[{{ i.effect }}]</span>
                         {% endfor %}
                     {% else %}
                         None
                     {% endif %}
                     <hr class="layui-bg-gray">
                </div>
            </div>
        </div>
        <div class="layui-col-md12" style="padding-bottom: 3%">
            <div class="layui-card">
                <div class="layui-card-header">容器信息</div>
                <div class="layui-card-body">
                    <table class="layui-hide " id="LAY_table" ></table>
                </div>
            </div>
        </div>
    </div>


{% endblock %}
{% block js %}

    <script>
        layui.use('table', function () {
            const table = layui.table;
            const node_name = '{{ node_info.node_name }}'

            //方法级渲染
            table.render({
                elem: '#LAY_table'
                , url: '{% url "k8s:node_details_pod" %}?node_name=' + node_name
                , cellMinWidth: 80
                , cols: [[
                    {type:'numbers', title: "序号"}
                    , {field: 'pod_name', title: 'NAME', sort: true}
                    , {field: 'namespace', title: '命名空间'}
                    , {field: 'status', title: '状态', sort: true}
                    , {field: 'pod_ip', title: 'POD IP'}
                    , {field: 'cpu_requests', title: 'CPU Request'}
                    , {field: 'cpu_limit', title: 'CPU Limit'}
                    , {field: 'memory_requests', title: '内存 Request'}
                    , {field: 'memory_limit', title: '内存 Limit'}
                    , {field: 'create_time', title: '创建时间', sort: true}
                ]]
                , id: 'testReload'
                , page: true
            });

            var $ = layui.$, active = {
                reload: function () {
                    var demoReload = $('#demoReload');
                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            search_key: demoReload.val()
                        }
                    });
                }
            };


        });

    </script>
{% endblock %}